<template>
  <div class="init-home" :style="styles">
    <div class="init-body">
      <div class="init-title"><img :src="imgHomeTitle" />数据中心</div>
      <div class="init-content">
        <div class="desc desc-ht">
          应用系统的运行，必须有关于组织的基础数据。在过去，信息系统实施阶段，通常通过
          <span>手工导入基础数据</span>或与
          <span>主数据做数据交换获得数据</span>，这两种方法都有其自身局限性：
        </div>
        <div class="intro">
          <ul>
            <li>
              .
              <span>手工导入</span
              >：手工导入是早期信息系统建设最常使用的方式，实现最为简单，但随着信息系统的增加，手工导入会导致信息系统间的数据不一致，并形成大量的数据孤岛。
            </li>
            <li>
              .
              <span>ETL</span
              >：基于ETL工具的数据交换，是过去系统整合时最经常使用的方法，这种方法存在如下问题：
            </li>
            <li>
              1. 费人工：数据交换完全基于实施人员编写完成，虽然已经有很好的ETL
              工具，但对接的系统越多，需要人工编写并长期维护的内容就越多
            </li>
            <li>
              2. 效率低：基于ETL
              的数据交换，只能以天为周期完成，即便是提高频率，通常最快也是以小时为维度
            </li>
            <li>
              3.
              安全性差：数据交换的实施过程至少有一方要对另一方暴露数据库访问权限，需要依赖防火墙等其它手段提高安全性
            </li>
          </ul>
        </div>
        <div class="desc">平台的基础数据中心组件帮助各种应用系统解决基础信息的获取问题。</div>
      </div>
      <div class="init-bt">
        <Button type="primary" @click="showOpen = true">立即开通</Button>
      </div>
    </div>
    <!--弹出层 -->
    <base-modal
      v-model="showOpen"
      title="确认开通?"
      @on-ok="open"
      @on-cancel="showOpen = false"
      okText="开通"
      simple="true"
    >
      <p>开通数据中心模块后：</p>
      <p>1.用户管理中心和电子身份中心的新增、导入、编辑、删除权限将被收回；</p>
      <p>2.ETL同步任务的监听将由用户管理中心切换到数据中心</p>
    </base-modal>
    <!--首屏加载覆盖 -->
    <div class="cover" v-if="showCover"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import { Tools } from "@/model/tools.ts";
import BaseModal from "@components/iv-modal/BaseModal.vue";
import { getSchoolStatus, setSchoolStatus } from "@/api/service.js";

@Component({
  components: {
    BaseModal
  }
})
export default class InitHome extends Tools {
  @Prop()
  private count!: number;

  private imgHomeTitle: string = require("@assets/img/home-title.png");
  private imgHomeBg: string = require("@assets/img/home-bg.png");
  private showCover: boolean = false;
  private showOpen: boolean = false;

  get styles(): any {
    return {
      backgroundImage: `url(${this.imgHomeBg})`,
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center"
    };
  }

  open() {
    this.showOpen = false;
    this.setSchoolStatus();
  }
  /**
   * 获取当前租户的状态
   */
  async getSchoolStatus() {
    //处理闪屏,即采用白色背景覆盖
    this.showCover = true;
    let [err, data] = await getSchoolStatus([]);
    this.showCover = false;
    if (err) {
      let msg = err || "获取当前租户状态信息异常";
      this.$Message.error(msg);
      return;
    }
    this.changeSchoolStatus(data.status);
  }

  /**
   * 设置当前租户的状态
   */
  async setSchoolStatus() {
    let [err, data] = await setSchoolStatus({ status: true });
    if (err) {
      let msg = err || "开通失败,请联系管理员";
      this.$Message.error(msg);
      return;
    }
    this.$Message.success("数据中心模块开通成功！");
    //修改state中开通状态值
    this.changeSchoolStatus(true);
  }

  @State
  private initData!: Array<any>;

  @Mutation("CHANGE_OPEN_STATE")
  private changeSchoolStatus!: (status: boolean) => any;

  mounted() {
    this.getSchoolStatus();
  }
}
</script>
<style lang="stylus" scoped>
.init-home {
  min-height: 100vh
  overflow: hidden
  .cover {
    position: fixed
    width: 100vw
    height: 100vh
    top: 0
    left: 0
    background: #fff
  }
}
.init-body {
  margin-left: 464px
  box-sizing: border-box
  user-select: none
}
.init-title {
  margin-top: 63px
  margin-bottom: 56px
  font-weight: bold
  font-size: 20px
  color: #464C5B
  letter-spacing: 0
  line-height: 20px
  vertical-align: middle
  img {
    margin-right: 16px
    vertical-align: middle
  }
}
.init-content {
  margin-bottom: 48px
  width: 595px
  .desc {
    font-size: 15px
    color: #464C5B
    letter-spacing: 0
    font-weight: 700
  }
  .desc-ht {
    height: 48px
    margin-bottom: 18px
  }
  .intro {
    background: #F5F5F6
    padding: 24px 24px 46px 24px
    margin-bottom: 24px
    font-size: 14px
    font-weight: 500
    color: #464C5B
    letter-spacing: 0
    ul {
      list-style: none
      li {
        &:first-child {
          margin-bottom: 20px
        }
      }
    }
  }
  span {
    color: #4481F1
  }
}
</style>
